<template>
    <el-dialog
            custom-class="wisdomDialog"
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :width="width"
            @close="close"
            :show-close="showCloseIcon">
        <span slot="title" class="title" v-if="showTitle">
            <slot name="title">
                {{title}}
            </slot>
        </span>
        <span>
            <slot></slot>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button v-if="showCloseBtn" class="ed-button ed_white_bottom" @click="close()">{{showCloseBtnText}}</el-button>
            <el-button v-if="showSubmitBtn" class="ed-button ed_black-bottom" :disabled="disabled" @click="save" :loading="loading">{{showSubmitBtnText}}</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "EdDialog",
        props:{
            // 是否显示title
            showTitle:{
                type:Boolean,
                required: false,
                default:true
            },
            width:{
                type:String,
                required: false,
                default: ()=> {
                    return '600px'
                }
            },
            title:{
                type:String,
                required: false,
            }, // 标题
            identification:{
                type:String,
                required: false,
            } , // 标识 同个页面多个弹窗关闭方法可以明确操作哪一个弹窗
            // 顶部 关闭icon 是否显示
            showCloseIcon:{
                type:Boolean,
                required: false,
                default:true
            },
            // 确认按钮 是否显示
            showSubmitBtn:{
                type:Boolean,
                required: false,
                default:true
            },
            // 确认按钮 text
            showSubmitBtnText:{
                type:String,
                required: false,
                default: ()=> {
                    return '确定'
                }
            },
            // 关闭按钮 是否显示
            showCloseBtn:{
                type:Boolean,
                required: false,
                default:true
            },
            // 关闭按钮 text
            showCloseBtnText:{
                type:String,
                required: false,
                default: ()=> {
                    return '取消'
                }
            },
        },
        data(){
            return{
                dialogVisible:true,
                disabled:false,
                loading:false
            }
        },
        mounted(){

        },
        methods:{
            close(){
                this.dialogVisible = false;
                if(this.identification){
                    this.$emit("close-dialog",this.identification)
                }else {
                    this.$emit("close-dialog")
                }
            },
            hideLoading(){
                this.loading = false;
            },
            save(){
                this.loading = true;
                this.$emit("save-dialog")
            }
        }
    }
</script>

<style lang="scss">
    .wisdomDialog{
        background: #FFFFFF;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        .el-dialog__header{
            padding: 15px 24px 10px 24px;
            .title{
                font-size: 18px;
                line-height: 26px;
                color: #303133;
            }
        }
        .el-dialog__footer{
            padding: 8px 16px 16px 16px;
        }
    }
</style>